<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    

    <script src="./Reactive和shllowReactive.js"></script>
    <script>
        const user1 = {
            name: "dxk",
            car: {
                color: "red"
            }
        }

        const userProxy =  reactive(user1)


        // console.log(userProxy.name);
        // console.log(userProxy.car.color);
        // userProxy.name += "100"
        // userProxy.car.color += "yellow"

        const user2 = {
            name: "dxk",
            car: {
                color: "red"
            }
        }
       const userProxy1 = shallowReactive(user2)

    //    console.log(userProxy1.name); 
    //    console.log(userProxy1.car.color); 

    //    console.log(userProxy1.name += "123");
       console.log(userProxy1.car.color += "123");
      
    </script>
</body>

</html>